2

HTML5 Canvas圆盘抽奖应用DEMO

html页面

 <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/main.js">
    </script>
    </head>
    <body>
    <div class="turnplate_box">
        <canvas id="myCanvas" width="300px" height="300px">抱歉!浏览器不支持。</canvas>
        <canvas id="myCanvas01" width="200px" height="200px">抱歉!浏览器不支持。</canvas>
        <canvas id="myCanvas03" width="200px" height="200px">抱歉!浏览器不支持。</canvas>
        <canvas id="myCanvas02" width="150px" height="150px">抱歉!浏览器不支持。</canvas>
        <button id="tupBtn" class="turnplatw_btn"></button>
    </div>
    <!-- 更改系统默认弹窗 -->
    <script type="text/javascript">
    window.alert = function(str)
    {
        var shield = document.createElement("DIV");
        shield.id = "shield";
        shield.style.position = "absolute";
        shield.style.left = "50%";
        shield.style.top = "50%";
        shield.style.width = "280px";
        shield.style.height = "150px";
        shield.style.marginLeft = "-140px";
        shield.style.marginTop = "-110px";
        shield.style.zIndex = "25";
        var alertFram = document.createElement("DIV");
        alertFram.id="alertFram";
        alertFram.style.position = "absolute";
        alertFram.style.width = "280px";
        alertFram.style.height = "150px";
        alertFram.style.left = "50%";
        alertFram.style.top = "50%";
        alertFram.style.marginLeft = "-140px";
        alertFram.style.marginTop = "-110px";
        alertFram.style.textAlign = "center";
        alertFram.style.lineHeight = "150px";
        alertFram.style.zIndex = "300";
        strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
        strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[中奖提醒]</li>\n";
        strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">"+str+"</li>\n";
        strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n";
        strHtml += "</ul>\n";
        alertFram.innerHTML = strHtml;
        document.body.appendChild(alertFram);
        document.body.appendChild(shield);
        this.doOk = function(){
            alertFram.style.display = "none";
            shield.style.display = "none";
        }
        alertFram.focus();
        document.body.onselectstart = function(){return false;};
    }
    </script>
    
    <div style="text-align:center;clear:both;margin-top:50px">
        <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
        <script src="/follow.js" type="text/javascript"></script>
    </div>
    </body>
    </html>
    

CSS页面代码段

*{
    padding: 0px;
    margin: 0px;
    font-size: 16px;
    font-family: "Microsoft YaHei";
}
.turnplate_box{
    width: 300px;
    height: 300px;
    margin: 100px auto;
    position: relative; 
}
.turnplate_box canvas{
    position: absolute;
}
#myCanvas{
    background-color: white;
    border-radius: 100%;
}
#myCanvas01,#myCanvas03{
    left: 50px;
    top: 50px;
    z-index: 30;
}
#myCanvas02{
    left: 75px;
    top: 75px;
    z-index: 20;
}
#myCanvas{
    -o-transform:  transform 6s;
    -ms-transform:  transform 6s;
    -moz-transform:  transform 6s;        
    -webkit-transform:  transform 6s;
    transition: transform 6s;
    -o-transform-origin:  50% 50%;
    -ms-transform-origin:  50% 50%;
    -moz-transform-origin:  50% 50%;        
    -webkit-transform-origin:  50% 50%;
    transform-origin: 50% 50%;
}
.turnplatw_btn{
    width: 60px;
    height: 60px;
    left: 120px;
    top: 120px;
    border-radius: 100%;
    position: absolute;
    cursor: pointer;
    border: none;
    background: transparent;
    outline: none;
    z-index: 40;
}

JS

$(document).ready(function(){
    //旋转角度
    var angles;
    //可抽奖次数
    var clickNum = 5;
    //旋转次数
    var rotNum = 0;
    //中奖公告
    var notice = null;
    //转盘初始化
    var color = ["#626262","#787878","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
    var info = ["谢谢参与","  1000","   10","  500","  100"," 4999","    1","   20"];
    var info1 = ['再接再厉','      元','     元','  淘金币','     元','  淘金币','     元','  淘金币']
    canvasRun();
    $('#tupBtn').bind('click',function(){
        if (clickNum >= 1) {
            //可抽奖次数减一
            clickNum = clickNum-1;
            //转盘旋转
            runCup();
            //转盘旋转过程“开始抽奖”按钮无法点击
            $('#tupBtn').attr("disabled", true);
            //旋转次数加一
            rotNum = rotNum + 1;
            //“开始抽奖”按钮无法点击恢复点击
            setTimeout(function(){
                alert(notice);
                $('#tupBtn').removeAttr("disabled", true);
            },6000);
        }
        else{
            alert("亲,抽奖次数已用光!");
        }
    });

    //转盘旋转
    function runCup(){
        probability();
        var degValue = 'rotate('+angles+'deg'+')';
        $('#myCanvas').css('-o-transform',degValue);           //Opera
        $('#myCanvas').css('-ms-transform',degValue);          //IE浏览器
        $('#myCanvas').css('-moz-transform',degValue);         //Firefox
        $('#myCanvas').css('-webkit-transform',degValue);      //Chrome和Safari
        $('#myCanvas').css('transform',degValue);
    }

    //各奖项对应的旋转角度及中奖公告内容
    function probability(){
        //获取随机数
        var num = parseInt(Math.random()*(7 - 0 + 0) + 0);
        //概率
        if ( num == 0 ) {
            angles = 2160 * rotNum + 1800;
            notice = info[0] + info1[0];
        }
        //概率
        else if ( num == 1 ) {
            angles = 2160 * rotNum + 1845;
            notice = info[7] + info1[7];
        }
        //概率
        else if ( num == 2 ) {
            angles = 2160 * rotNum + 1890;
            notice = info[6] + info1[6];
        }
        //概率
        else if ( num == 3 ) {
            angles = 2160 * rotNum + 1935;
            notice = info[5] + info1[5];
        }
        //概率
        else if ( num == 4 ) {
            angles = 2160 * rotNum + 1980;
            notice = info[4] + info1[4];
        }
        //概率
        else if ( num == 5 ) {
            angles = 2160 * rotNum + 2025;
            notice = info[3] + info1[3];
        }
        //概率
        else if ( num == 6 ) {
            angles = 2160 * rotNum + 2070;
            notice = info[2] + info1[2];
        }
        //概率
        else if ( num == 7 ) {
            angles = 2160 * rotNum + 2115;
            notice = info[1] + info1[1];
        }
    }

    //绘制转盘
    function canvasRun(){
        var canvas=document.getElementById('myCanvas');
        var canvas01=document.getElementById('myCanvas01');
        var canvas03=document.getElementById('myCanvas03');
        var canvas02=document.getElementById('myCanvas02');
        var ctx=canvas.getContext('2d');
        var ctx1=canvas01.getContext('2d');
        var ctx3=canvas03.getContext('2d');
        var ctx2=canvas02.getContext('2d');
        createCircle();
        createCirText();
        initPoint();
    
        //外圆
        function createCircle(){
            var startAngle = 0;//扇形的开始弧度
            var endAngle = 0;//扇形的终止弧度
            //画一个8等份扇形组成的圆形
            for (var i = 0; i< 8; i++){
                startAngle = Math.PI*(i/4-1/8);
                endAngle = startAngle+Math.PI*(1/4);
                ctx.save();
                ctx.beginPath(); 
                ctx.arc(150,150,100, startAngle, endAngle, false);
                ctx.lineWidth = 120;
                if (i%2 == 0) {
                    ctx.strokeStyle =  color[0];
                }else{
                    ctx.strokeStyle =  color[1];
                }
                ctx.stroke();
                ctx.restore();
            } 
        }

        //各奖项
        function createCirText(){     
            ctx.textAlign='start';
            ctx.textBaseline='middle';
            ctx.fillStyle = color[3];
            var step = 2*Math.PI/8;
            for ( var i = 0; i < 8; i++) {
                ctx.save();
                ctx.beginPath();
                ctx.translate(150,150);
                ctx.rotate(i*step);
                ctx.font = " 20px Microsoft YaHei";
                ctx.fillStyle = color[3];
                ctx.fillText(info[i],-30,-115,60);
                ctx.font = " 14px Microsoft YaHei";
                ctx.fillText(info1[i],-30,-95,60);
                ctx.closePath();
                ctx.restore();
            }
        }

        function initPoint(){ 
            //箭头指针
            ctx1.beginPath();
            ctx1.moveTo(100,24);
            ctx1.lineTo(90,62);
            ctx1.lineTo(110,62);
            ctx1.lineTo(100,24);
            ctx1.fillStyle = color[5];
            ctx1.fill();
            ctx1.closePath();
            //中间小圆
            ctx3.beginPath();
            ctx3.arc(100,100,40,0,Math.PI*2,false);
            ctx3.fillStyle = color[5];
            ctx3.fill();
            ctx3.closePath();
            //小圆文字
            ctx3.font = "Bold 20px Microsoft YaHei"; 
            ctx3.textAlign='start';
            ctx3.textBaseline='middle';
            ctx3.fillStyle = color[4];
            ctx3.beginPath();
            ctx3.fillText('开始',80,90,40);
            ctx3.fillText('抽奖',80,110,40);
            ctx3.fill();
            ctx3.closePath();
            //中间圆圈
            ctx2.beginPath();
            ctx2.arc(75,75,75,0,Math.PI*2,false);
            ctx2.fillStyle = color[2];
            ctx2.fill();
            ctx2.closePath();
        }
    }
});

行走的程序猿
117 声望1 粉丝

行走的程序猿